﻿<ul class="nav navbar-nav">
    <li ng-repeat="notification in notifications" class="dropdown {{notification.Class}}">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="{{notification.Icon}}"></i>
            <span class="{{notification.Badge.Icon}}">{{notification.Badge.Label}}</span>
        </a>
        <ul class="dropdown-menu">
            <li class="header">{{notification.Header}}</li>
            <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu">
                    <li ng-repeat="notificationItem in notification.Items">
                        <a ng-show="notificationItem.Type == 'Avatar'" href="#">
                            <div class="pull-left">
                                <img src="{{notificationItem.ImageUrl}}" class="img-circle" />
                            </div>
                            <h4>
                                {{notificationItem.Title}}
                                <small><i class="fa fa-clock-o"></i> {{notificationItem.Time}}</small>
                            </h4>
                            <p>{{notificationItem.Message}}</p>
                        </a>
                        <a ng-show="notificationItem.Type == 'Alert'" href="#">
                            <i class="{{notificationItem.Icon}}"></i> {{notificationItem.Message}}
                        </a>
                        <a ng-show="notificationItem.Type == 'Progress'" href="#">
                            <h3>
                                {{notificationItem.Message}}
                                <small class="pull-right">{{notificationItem.Percent}}%</small>
                            </h3>
                            <div class="progress xs">
                                <div class="{{notificationItem.Icon}}" style="width: {{notificationItem.Percent}}%" role="progressbar" aria-valuenow="{{notificationItem.Percent}}" aria-valuemin="0" aria-valuemax="100">
                                    <span class="sr-only">{{notificationItem.Percent}}% Complete</span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="footer"><a href="#">{{notification.Footer}}</a></li>
        </ul>
    </li>

    <!-- User Account: style can be found in dropdown.less -->
    <li class="dropdown user user-menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="{{userDetails.ImageUrl}}" class="user-image" alt="User Image" />
            <span class="hidden-xs"> {{userDetails.Name}}</span>
        </a>
        <ul class="dropdown-menu">
            <!-- User image -->
            <li class="user-header">
                <img src="{{userDetails.ImageUrl}}" class="img-circle" alt="User Image" />
                <p>
                    {{userDetails.Name}} - Web Developer
                    <small>Member since Nov. 2012</small>
                </p>
            </li>
            <!-- Menu Body -->
            <li class="user-body">
                <div class="col-xs-4 text-center">
                    <a href="#">Followers</a>
                </div>
                <div class="col-xs-4 text-center">
                    <a href="#">Sales</a>
                </div>
                <div class="col-xs-4 text-center">
                    <a href="#">Friends</a>
                </div>
            </li>
            <!-- Menu Footer-->
            <li class="user-footer">
                <div class="pull-left">
                    <a href="#" class="btn btn-default btn-flat">Profile</a>
                </div>
                <div class="pull-right">
                    <a href="#" class="btn btn-default btn-flat">Sign out</a>
                </div>
            </li>
        </ul>
    </li>
    <!-- Control Sidebar Toggle Button -->
    <li>
        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
    </li>
</ul>